{extend name='index@template/base'}{/extend}
{block name='style'}
<link rel="stylesheet" href="__STATIC__/ceshi/css/app.css">
{/block}
{block name='script'}

<script src="__STATIC__/plugins/tdrag/Tdrag.js"></script>
{/block}
{block name='content'}
<div class="wrapper">
    <div class="row app" style="padding: 20px;">
        <div class="col-md-5 col-sm-5">
            <div class="app-preview">
                <div class="app-header"></div>
                <div class="app-content">
                    <div class="inner">
                        <div class="title">
                            <h1><span class="ng-binding">默认菜单</span></h1>
                        </div>
                    </div>
                    <div class="nav-menu">
                        <div class="nav-menu-wx">
                            <ul class="nav-group">
                                <li class="nav-group-item" id="add_menu_li">
                                    <a href="javascript:void(0);" onclick="add_wx_menu()">
                                        <i class="fa fa-plus"></i> 添加菜单
                                    </a>
                                </li>
                            </ul>

                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-7 col-sm-7">
            <div id="first_box" class="box box-success">
                <div class="box-body">
                    <div class="form-group">
                        <label class="control-label col-xs-2">标题 <span style="color: red;">*</span></label>
                        <div class="col-xs-10">
                            <input id="title" type="text" class="form-control" name="title" value="">
                            <span class="help-block">仅用于区分个性化菜单</span>
                        </div>
                    </div>
                </div>
            </div>
            <div id="menu_box" class="box box-success">
                <div class="btns">
                    <a href="javascript:;" onclick="delete_btn()"><i class="fa fa-times"></i></a>
                </div>
                <div class="box-body">

                    <div class="form-group">
                        <label class="control-label col-xs-2">菜单名称<span style="color: red;">*</span></label>
                        <div class="col-xs-10">
                            <input id="name" type="text" class="form-control" name="name" value="菜单名称">
                            <span class="help-block">仅用于区分个性化菜单</span>
                        </div>
                    </div>
                    <div id="detail">
                        <div class="form-group">
                            <label class="control-label col-xs-2">类型<span style="color: red;">*</span></label>
                            <div class="col-xs-10">
                                <input type="radio" name="ipt" value="view"> 链接
                                <input type="radio" name="ipt" value="click"> 触发关键字
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-2"></label>
                            <div class="col-xs-10">
                                <input id="url" type="text" class="form-control" name="url">
                                <span class="help-block">仅用于区分个性化菜单<span style="color: red;">*</span></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-9 col-sm-offset-3">
                            <button onclick="add_node()" type="button" class="btn btn-primary save_btn">&nbsp;&nbsp;保存&nbsp;&nbsp;</button>
                            <button type="button" class="btn btn-default radius ml-20" onclick="layer_close();">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
        <div class="container-fluid">
            <a class="sx_navbar-brand" href="#" onclick="add_to_server()">确定添加</a>
        </div>
    </nav>


</div>
{/block}
{block name='script_extra'}
<script>
    var arr = {};
    var data_arr = {};
    var sub_button = {};
    var if_child = false;//判断是不是子菜单
    var x = 1;
    var child_arr = {};

    //保存单个数据
    function add_node() {
        if($('#url').val()==""){
            layer.alert('信息不全，无法保存');
            return;
        };
        var tag = $('.active')[0].tagName;
        if (tag == "DD") {
            var pid = $('.active').parent('dl').parent('li')[0].id;
            var id = $('.active')[0].id;
            var item = data_arr[pid]['sub_button'];
            item[id]['name'] = $('#name').val();
            item[id]['type'] = $("input[name='ipt']:checked").val();
            if($("input[name='ipt']:checked").val()=="click"){
                item[id]['key'] = $('#url').val();
            }else if($("input[name='ipt']:checked").val() == "view"){
                item[id]['url'] = $('#url').val();
            }

        } else if (tag == "LI") {
            var menu_id = $('.nav-group-item.active')[0].id;
            if(data_arr[menu_id]['sub_button']){
                data_arr[menu_id]['name'] = $('#name').val();
            }else{
                data_arr[menu_id]['name'] = $('#name').val();
                data_arr[menu_id]['type'] = $("input[name='ipt']:checked").val();
                data_arr[menu_id]['url'] = $('#url').val();
            }
        }
        console.log(data_arr);
        layer.msg('操作成功')
    }

    //点击右边列表【菜单名称】输入框事件
    $('#name').keyup(function (e) {
        console.log(if_child)
        if (if_child) {
            $(".is_child.active .text-child").html($(this).val());
        } else {
            $(".nav-group-item.active .text-success").html($(this).val());
        }

    });

    //点击左边手机【菜单名称】按钮事件
    function edit_btn(e) {
        if_child = false;
        if ($(e).parent('li').children('dl').children('dd').length > 1) {
            $('.box #detail .form-group').addClass('has_child')
        } else {
            $('.box #detail .form-group').removeClass('has_child')
        }

        //切换当前
        $(".designer-y dd").removeClass('active');
        $(e).parent('li').addClass('active').siblings().removeClass('active');

        //名称
        $("#name").val($(e).html());

        var menu_id=$(e).parent('li')[0].id;
        var arr=data_arr[menu_id];

        $("#name").val(arr['name']);
        $("#url").val(arr['url']);
        var type=arr['type'];
        console.log(type);
        var input=document.querySelectorAll('input[name="ipt"]');
        for(var j=0;j<input.length;j++) {
            if(input[j].value===type) {
                input[j].checked=true;
            }
        }
    }

    var i = 10;
    //点击左边手机【添加菜单】按钮事件
    add_wx_menu();
    function add_wx_menu() {
        if_child=false;
        $('.box #detail .form-group').removeClass('has_child');
        $(".designer-y dd").removeClass('active');
        $(".nav-group li").removeClass('active');
        var input = document.querySelectorAll('input[name="ipt"]');
        for (var j = 0; j < input.length; j++) {
            if (input[j].checked) {
                input[j].checked = false;
            }
            input[0].checked = true;
        }
//        $("input:radio[name='ipt']").eq(0).attr("checked",'checked');
        var li_length = $(".nav-group li").length;
        var li = '  <li id="' + i + '" class="nav-group-item active"> ' +
//                '<i class="fa fa-close" onclick="delete_menu('+i+')"></i>' +
                '<a href="javascript:void(0);" onclick="edit_btn(this);" class="text-success">' +
                '菜单名称' +
                ' </a>' +
                ' <dl class="designer-y"> ' +
                '<dd  class="js-not-sortable ng-scope"> ' +
                '<a href="javascript:void(0)" onclick="add_child_menu(this)">' +
                '<i class="fa fa-plus"></i>' +
                '</a> ' +
                '</dd>' +
                ' </dl>' +
                '</li>';
        $("#add_menu_li").before(li);
//        $(".nav-group").prepend(li);
        var name = $(".nav-group-item.active .text-success").html();
        $("#name").val(name);
        $("#url").val('');

        if (li_length == 3) {
            $(".nav-group-item").css('width', "32.5%");
//            $(".nav-group li:last-child").remove();
            $("#add_menu_li").css('display', 'none');

//            $(".nav-group-item").Tdrag({
//                scope:".nav-group",
//                axis:"x",
//                pos:true,
//                dragChange:true,
//                changeMode:"sort"
//            });
        }
        if (li_length == 1) {
            $(".nav-group-item").css('width', "50%");
        }

        if (li_length == 2) {
            $(".nav-group-item").css('width', "32.5%");
        }
        data_arr[i] = {'name': name, 'type': ''};
        console.log(data_arr);
        i = i + 23;
    }

    var child_id = 1;
    function add_child_menu(e) {
        var tag = $('.active')[0].tagName;
        var pid = e.parentNode.parentNode.parentNode.id;

        if_child = true;
        var dd_length = $(e).parent('dd').siblings().length;
        if (dd_length > 4) {
            return;
        }
        $(".nav-group li").removeClass('active');
        $(".designer-y dd").removeClass('active');
        var dd1 = '<dd id="' + child_id + '" class="is_child active"> <a href="javascript:void(0)" onclick="edit_child_menu(this)" class="text-child">子菜单名称</a> </dd>';
        $(e).parent("dd").parent('dl').prepend(dd1);

        var name = $(".is_child.active .text-child").html();
        $("#name").val(name);
        $("#url").val('');
        if(data_arr[pid]['sub_button']==undefined){
            data_arr[pid]['sub_button'] = {};
        }
        data_arr[pid]['sub_button'][child_id] = {'name': name, 'type': ''};
        child_id = child_id + 100;
        //如果有孩子，则减除data_arr里面父亲的type属性；
        delete data_arr[pid]['type'];
        delete data_arr[pid]['url'];
        console.log(data_arr);


    }

    function edit_child_menu(e) {
        if_child = true;
        $(".nav-group li").removeClass('active');
        $('.is_child').removeClass('active');
        $(e).parent('dd').addClass('active');
        $('.box #detail .form-group').removeClass('has_child');
        $("#name").val($(e).html());
        //处理json数据



    }


    var arr_001 = [];
    function add_to_server() {
        arr.button = data_arr;
        arr.title = $('#title').val();
        $.ajax({
            dataType: 'json',
            data: arr,
            type: 'post',
            url: "{:url('wechat/WechatMenu/insert')}",
            success: function (res) {
                if (res.success) {
                    layer.msg(res.message, {time: 1000}, function () {
                        layer_close();
                        parent.$('#table').bootstrapTable('refresh');
                    });
                } else {
                    layer.alert(res.message, {icon: 5});
                }
            }
        })
    }
    function delete_btn() {

        var id = $('.active')[0].id;
        var tag=$('.active')[0].tagName;
        if(tag=="DD"){
            var pid=$('.active').parent('dl').parent('li')[0].id;
            $('#'+id).parent().parent().addClass('active');
            //名称
            $("#name").val($('#'+id).parent().parent().children('a').html());
            if_child=false;
            $('#'+id).remove();
            if (document.getElementsByClassName('designer-y')[0].children.length > 1) {
                $('.box #detail .form-group').addClass('has_child')
            } else {
                $('.box #detail .form-group').removeClass('has_child')
            }
            //处理json数据
            delete data_arr[pid]['sub_button'][id];
            if(Object.keys(data_arr[pid]['sub_button']).length == 0){
                delete data_arr[pid]['sub_button'];
            }
        }else if(tag=="LI"){
            var ul=$('#'+id).parent();
            $('#'+id).remove();

            var linum=document.getElementsByClassName('nav-group')[0].children.length;
            if(linum<4 && linum>1){
                ul.children(':first').addClass('active');
                $("#add_menu_li").css('display','');
            }
            //处理json数据
            delete data_arr[id];
           console.log(data_arr)

        }


    }


    function delete_menu(id) {
        //切换当前
        var tag = $('.active')[0].tagName;
        if (tag == "DD") {
            $(".nav-group-item").removeClass('active');
            $("#" + id).addClass('active').siblings().removeClass('active');
        } else if (tag == "LI") {
            $(".designer-y dd").removeClass('active');
            $("#" + id).addClass('active').siblings().removeClass('active');
        }


        layer.confirm('你确定要删除该菜单及其所有子菜单吗？', {btn: ['确定', '取消']}, function () {
            //判断是否是子菜单
            var tag = $('.active')[0].tagName;
            if (tag == "DD") {
                var pid = $('.active').parent('dl').parent('li')[0].id;
                delete data_arr[pid]['sub_button'][id];
                console.log(data_arr)
            } else if (tag == "LI") {

                delete data_arr[id];
                console.log(data_arr)
            }
        })

    }
</script>


{/block}